<!--
 * @Descripttion: 列设置公共组件
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-09 11:16:00
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-19 09:31:56
-->
<template>
  <div class="colSetupBtn">
    <el-dropdown trigger="click">
      <el-button class="commonBut saveBtn funComBut fr">
        列设置
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu
        slot="dropdown"
        style="padding: 20px 20px; width: 500px; overflow: auto"
      >
        <el-dropdown-item
          :class="{
            checkStyle:
              mark && (mark == 'projectDetailReport' || mark == 'issuesList'),
          }"
        >
          <el-tree
            ref="headerList"
            :data="tableColList"
            :props="defaultProps"
            node-key="id"
            :check-strictly="checkStrictly"
            :default-checked-keys="checkedKeys"
            @check-change="handleCheckChange"
            accordion
            show-checkbox
          ></el-tree>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'colSetup',
  props: {
    tableColList: {
      type: Array,
      required: true,
    },
    mark: {
      type: String,
    },
  },
  data() {
    return {
      checkedKeys: [],
      selectMenuId: [],
      selArr: [],
      treeExpandData: [], //用于接收tree树id的数组
      roleId: '',
      provincialCenterId: '',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      childData: [],
    }
  },
  watch: {
    tableColList: {
      handler(newVal, oldVal) {
        this.getTableAllLists()
        this.getRoleTreeRootNode()
      },
      deep: true,
    },
  },
  methods: {
    // 获取树形结构默认展开节点
    getRoleTreeRootNode() {
      const vm = this
      vm.provincialCenterId = vm.tableColList[0].id //默认展开第一个节点
      vm.treeExpandData.push(vm.provincialCenterId)
    },
    // 获取选中的节点数组
    getTableAllLists() {
      this.selectKeys(this.tableColList)
      // 给选中的节点前添加对号
      this.checkedKeys = this.selArr
      this.checkStrictly = false
      if (
        this.mark &&
        (this.mark == 'projectDetailReport' || this.mark == 'issuesList')
      ) {
        //项目明细报表
        this.childData = []
        for (let i = 0, len = this.tableColList.length; i < len; i++) {
          this.childData = this.childData.concat(this.tableColList[i].children)
        }
      }
    },
    // 查找已经被选中的节点
    selectKeys(menuList) {
      for (let menu of menuList) {
        if (menu.isShow) {
          this.selArr.push(menu.id)
        }
        if (menu.children) {
          this.selectKeys(menu.children)
        }
      }
    },
    //所有默认导出设置为否
    setDefaultFalse(arr) {
      for (let item of arr) {
        item.isShow = false
        if (item.children && item.children.length > 0) {
          this.setDefaultFalse(item.children)
        }
      }
    },
    //设置选中节点为导出字段
    setDefauled(arr, list) {
      for (let item of arr) {
        for (let items of list) {
          if (item == items.id) {
            items.isShow = true
          }
          if (items.children && items.children.length > 0) {
            this.setDefauled(arr, items.children)
          }
        }
      }
    },
    // 节点选中状态改变
    handleCheckChange(data, checked, indeterminate) {
      // 节点被选中时，获取所有选中的节点id
      let arr = this.$refs.headerList
        .getCheckedKeys()
        .concat(this.$refs.headerList.getHalfCheckedKeys())
      if (
        this.mark &&
        (this.mark == 'projectDetailReport' || this.mark == 'issuesList')
      ) {
        this.setDefaultFalse(this.childData)
        this.setDefauled(arr, this.childData)
        this.$emit('getSelectMenuId', this.childData)
      } else {
        this.setDefaultFalse(this.tableColList)
        this.setDefauled(arr, this.tableColList)
        this.$emit('getSelectMenuId', this.tableColList)
      }
    },
  },
}
</script>

<style scoped lang="less">
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/deep/ .el-dropdown-menu__item {
  padding: 0 0px;
}
// .checkStyle/deep/ .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox{
//   display: none !important;
// }

.checkStyle/deep/ .el-tree-node > .el-tree-node__children {
  max-height: 300px !important;
  overflow: auto !important;
}
</style>
